<template>
    <div class="bodys">
        <div class="top">
            <img src="../../assets/home/head.png">
       </div>
       <div class="notice">
           <img src="../../assets/home/notic.png"><span>{{notic}}</span>
       </div>

       <div class="bottom">
           <p>{{$t('ws_index.gains')}}</p>
                <el-table
                    :data="earning"
                    stripe
                    style="width: 100%;font-size:10px">
                    <el-table-column
                    prop="type"
                    :formatter="type"
                    :label="$t('ws_index.type')"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="money"
                   :label="$t('ws_index.inco')"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                    :label="$t('ws_index.hour')"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="source"
                   :label="$t('ws_index.source')"
                    >
                    </el-table-column>
                </el-table>
       </div>
    </div>
</template>
<script>
import Header from "@/components/Header";
import { getearn } from '@/api/getData'
import { getnotice } from '@/api/getData'
export default {
    data(){
        return {
            shows:true,
            notic:'活动',
            user:JSON.parse(sessionStorage.getItem("user")),
            earning:[],
        }
    },
    methods: {
    async getData(){
      const data = await getnotice();
        this.notic =data.data.result;
    },
    async getearn(id){
      const data = await getearn(id);
        this.earning = data.data.result;
    },
    type:function(row,column){
        return row.type == 1 ? '推广收益' : row.sex == 2 ? '每日盈利' : '团队收益';

    }
    },
    components:{
        Header
    },
 
    mounted(){
        this.getData();
        this.getearn(this.user.user_id);
    }
}
</script>
<style lang="stylus" scoped>
.bodys{
    width: 100%;
    height:100vh;
    background: #F8F8FF;
    overflow-x: hidden;
    .top{
         height:30vh;
        >img{
            width :100vw;
            height:30vh;
        }
    }
    .miden{
        .pname{
            margin:0;
            text-indent :.2rem;
            >span{
                font-size:.45rem;
                margin:0;
                text-indent :.2rem;
            }
        }
        .pnumber{
            margin:0;
            display:flex; 
            >span{
                font-size:.45rem;
                margin:0;
                flex:1;
                text-indent :.2rem;
            }
        }
    }
    .bottom{
        background #fff;
        margin-bottom :1.2rem;
        >P{
           font-size:.35rem; 
           margin:.2rem auto auto .2rem;
           border-bottom:1px solid  #E4E7ED;
           height :7vh;
           line-height :7vh;
        }
        >ul{
            margin-top:.3rem; 
            padding-left : .2rem;
            >li{
                display :flex;
                border-bottom:1px solid  #E4E7ED;
                height:1rem;
                align-items :center;
                >span{
                    flex:1
                    font-size:.35rem;
                    text-align :center;
                }
            }
        }
    }
    .notice{
        margin:0rem;
        display: inline-block;
        background-color:#fff;
        height:7vh;
        display :flex;
        align-items :center;
        white-space: nowrap;
        overflow: hidden;
        >img{
            position:relative;
            display :inline-block;
           
            height :18px;
            padding-left:.2rem;
            padding-right: .2rem;
            background:#fff;
            z-index :9999
        }
        >span{
            font-size:15px;
            text-indent :.2rem;
            color :#000;
            left:70%;
            position:relative;
            animation: 20s infeed linear infinite;
        }
        @keyframes infeed {
                    0%{
                        left: 100%;
                    }
                    100%{
                        left:-200%;
                    }
                }
    }
}

</style>
